<template>
  <div class="box">
    <h4>孙组件标题</h4>
    <div>{{ content1 }}</div>
    <div>{{ content2.name }}</div>
    <!-- 但是基本数据类型祖先组件传递参数的时候,只会传递一次,后续就不会更新了 -->
    <!-- 主要原因是因为不想让祖先修改数据之后影响到后代组件 -->
    <!-- 设想后代组件在很多地方使用,祖先组件修改数据,后代组件也修改的话会造成很多错误 -->
    <button @click="getContext">修改祖先组件传递的数据</button>
    <button @click="getContext2">修改对象</button>
    <!-- 修改由祖先组件传递过来对象身上的熟悉可以被修改 -->
    <!-- 这是因为传递对象是传递的内存地址,内存地址并没有发生改变所以可以修改 -->
    <button @click="getContext3">修改对象中的属性</button>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  // 后代组件使用 inject 来接收祖先组件传递过的参数
  //
  name: 'GrandChild',
  // 接收形式: 第一种.数组接收
  inject: ['content1', 'content2', 'getContext', 'getContext2', 'getContext3']
  // 第二种: 配置对象接收
  //   inject: {
  //     content1: {
  //       type: String
  //     },
  //     content2: {
  //       type: Object
  //     }
  //   }
  // 注意: 不能使用对象形式来接收
}
</script>
